<template>
<div>
  <el-row :gutter="12">
    <el-col :span="4">
      <div class="lable-wrap category">
        <label for>类型：</label>
        <div class="warp-content">
          <el-select v-model="search_key_value" placeholder="请选择" style="width:100%;">
            <el-option v-for="item in options.category" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" clearable="true"></el-option>
          </el-select>
        </div>
      </div>
    </el-col>
    <el-col :span="7">
      <div class="lable-wrap date">
        <label for>日期：&nbsp;&nbsp;</label>
        <div class="warp-content">
          <el-date-picker style="width:100%;" v-model="dataValue" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="lable-wrap key-work">
        <label for>关键字：&nbsp;&nbsp;</label>
        <div class="warp-content">
          <el-select v-model="value2" style="width:100%;">
            <el-option v-for="item in search_key" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" clearable="true"></el-option>
          </el-select>
        </div>
      </div>
    </el-col>
    <el-col :span="3">
      <el-input v-model="search_key_input" placeholder="关键字" style="width:100%;"></el-input>
    </el-col>
    <el-col :span="2">
      <el-button   type="danger" @click="onSubmit" style="height:40px;width:90%;">搜索</el-button>
    </el-col>
    <el-col :span="2">
      <span v-html="'&nbsp'"></span>
    </el-col>
    <el-col :span="2">
      <el-button  type="danger" @click="dialog_info= true" style="height:40px;width:90%;" >新增</el-button>
    </el-col>
  </el-row>

  <!-- 表格 -->
  <div class="black-space-30"></div>
  <el-table v-loading="questionsData.loading" :data="questionsData.data" border style="width: 100%" max-height="450"  @selection-change="handleSelectionChange" >
    <el-table-column type="index" width="50"> </el-table-column>
    <el-table-column type="selection" width="45"></el-table-column>
    <el-table-column label="问卷标题" align="center" width="200">
      <template slot-scope="scope"> {{scope.row.title | strLenFilter }}  </template>
    </el-table-column>
    <el-table-column prop="createDate" label="创建日期" align="center" width="200">
      <template slot-scope="scope">
        {{ scope.row.createDate|formatDate }}
      </template>
    </el-table-column>
    <el-table-column  label="状态" align="center" width="65">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </template>
    </el-table-column>
    <el-table-column  label="开始时间|截止时间" align="center" width="300">
      <template slot-scope="scope">
        {{ scope.row.date['0']|formatDate() }} | {{ scope.row.date['1'] | formatDate() }}
      </template>
    </el-table-column>
    <el-table-column label="问卷地址" align="center" width="480">
      <template slot-scope="scope">127.0.0.1/question/{{scope.row.id}}.html  </template>
    </el-table-column>
    <el-table-column  label="问卷描述" align="center" width="500">
      <template slot-scope="scope"> {{scope.row.desc | strLenFilter(40) }}  </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="428"  fixed="right">
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" content="双击下载问卷地址二维码" placement="top-start">
          <el-button type="success" size="mini" class="my-size12" icon="el-icon-check"  @dblclick.native="downCode(scope.row.id)">下载</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="查看问卷信息" placement="top-start">
         <el-button type="info" size="mini" class="my-size12" icon="el-icon-search" @click="lookflagData(scope.$index)">查看</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="编辑问卷信息" placement="top-start">
          <el-button type="info" size="mini" class="my-size12" icon="el-icon-edit"  @click="editflagData(scope.$index)" >修改</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="查看问卷做答详情" placement="top-start">
          <el-button type="info" size="mini" class="my-size12" icon="el-icon-edit"  @click="lookanswer(scope.row.id)">做答</el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="双击删除此问卷" placement="top-start">
          <el-button type="danger" size="mini" class="my-size12" icon="el-icon-delete"   @dblclick.native="delItem(scope.row.id)">删除</el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <div class="black-space-30"></div>
  <!--分页条-->
  <el-row>
    <el-col :span="12">
      <el-button size="medium" @click="deleteMore">批量删除</el-button>
      <el-button size="medium" type="danger" @click="getData">刷新列表</el-button>
    </el-col>
    <el-col :span="12">
      <el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :page-sizes="questionsData.pageSizes" layout="total, sizes,prev, pager, next, jumper" :total="questionsData.total"></el-pagination>
    </el-col>
  </el-row>
  <!-- 新增 弹窗  -->
    <DialogInfo  :flag.sync="dialog_info"></DialogInfo>
    <DialogLook  :flag.sync="lookflag" :data="lookData"></DialogLook>
    <DialogEdit  :flag.sync="editflag" :data="lookData"></DialogEdit>
  </div>
</template>

<script>
import {  reactive,  ref,  onMounted } from "@vue/composition-api";
import {  GetCatelog,  GetList} from "@/api/news";
import DialogInfo from "./dialog/add";
import DialogLook from "./dialog/look";
import DialogEdit from "./dialog/edit";
import {  GetAllQuestion , DownCode,  UpdateQuestionStatus ,DeleteQuestion} from "@/api/question"; 
import {  strLenFilter , formatDate } from "@/utils/stringfilter"; 
import { LocalFileDown  } from "@/utils/fileutil"; 
export default {
  name: "infoindex",
  components: {
    DialogInfo,  DialogLook ,DialogEdit
  },
  filters:{
    strLenFilter,formatDate
  },
  setup(props,{root}) {
    const questionsData = reactive({
      data:[],
      item:"",
      loading:true  ,
      total: 20 ,
      pageSize: 10 ,
      currentPage:  0 ,
      pageSizes:[10, 20, 30]
    })
    
    /** 获取列表 */
    const getData = ()=>{
      questionsData.loading = true ;
      GetAllQuestion({
        pageSize: questionsData.pageSize ,
        currentPage:questionsData.currentPage 
      }).then((rep)=>{
        questionsData.data = rep.data.message.message;
        questionsData.loading = false ;
        questionsData.total =  rep.data.message.total ;
      })
    }
    getData() ;


    // 做弹窗
   const dialogVisible = ref(false) ;


    const search_key_value = ref("");
    const dataValue = ref("");
    const value2 = ref("");
    const search_key_input = ref("");

    const dialog_info = ref(false);
    const options = reactive({ category: [] });
    const search_key = reactive([]); 

    const onSubmit = () => {
      console.log("submit!");
    };
    // 页面大小改变
    const handleSizeChange = pageSize => {
      // 还有数据的时候进行请求
      if(questionsData.pageSize > pageSize){
        // 删除数据    ======================================  能优化
        questionsData.pageSize = pageSize ;
        getData() ;
      }else if(questionsData.pageSize < pageSize){
        if(questionsData.pageSize < questionsData.total ){
          questionsData.pageSize = pageSize ;
          getData() ;
        }
      }
    };
    const handleCurrentChange = page => {
      if( page-1 !=questionsData.currentPage){
        questionsData.currentPage = page -1 ;
         getData() ;
         alert("page")
      }
    };

    const downCode = (questionId)=>{
      console.log('questionId :', questionId);
      alert("下载二维码" ,questionId );
      DownCode({questionId }).then((res)=>{
        LocalFileDown(res,`${questionId}.png`);
      }).catch(()=>{
        root.$message({
            type: 'error',
            message: '下载失败，稍后重试'
          });  
      })
    } 

    const lookanswer = (questionId)=>{
      // 跳转到详情页
      root.$router.push({
        name: "InfoItem",
        params:{           
          id: questionId
        }
      });
    
    } 
    const delItem= (questionId)=>{
      alert(questionId)
      DeleteQuestion([questionId]).then((res)=>{
        if(res.data.status == 0){
          root.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      }).catch(()=>{
         root.$message({
            type: 'error',
            message: '删除失败，稍后尝试!'
          });
      })
    } 

    /** 生命周期
     */
    onMounted(() => {
     
    });
    // 弹出框状态值
    const lookflag = ref(false) ; // 查看的弹窗
    const editflag = ref(false) ; // 修改的弹窗
    const lookData =reactive({}) ; // 为传值准备的
    //
    const lookflagData=(index)=>{
      // 找值
      lookData.value = questionsData.data[index] ;
      lookflag.value = true ;
    } 
    const editflagData=(index)=>{
      // 找值
      lookData.value = questionsData.data[index] ;

      console.log('lookData :', lookData);
      editflag.value = true ;
    } 

    var selectData =[] ;
    const handleSelectionChange= (e)=>{
      selectData= e ;
    }
    // 批量删除数据
    const deleteMore = ()=>{
      console.log(selectData)
      if(selectData.length  == 0 ){
        root.$message({
          showClose: true,
          message: "未选择任何数据",
          type: "success"
        });
      }else{
        root.$confirm(`是否确定删除此${selectData.length}条数据,将会删除问卷的相关数据`, '提示.警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 调用接口
            
            root.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            root.$message({
              type: 'info',
              message: '已取消删除'
            });          
        });
      }
    }

    return {
      // 弹窗功能
    dialogVisible ,

    // 正式数据
      questionsData,

      // ref     
       dialog_info, dataValue, search_key_input, 
       search_key_value,  value2,  search_key,  options,  

       // 弹出框状态
       lookflag , lookData , lookflagData ,editflag , editflagData ,

      onSubmit,
      // 方法
      handleSizeChange,
      handleCurrentChange,

      // 按钮方法
      downCode  ,lookanswer, delItem,
       // 表格选择
      handleSelectionChange,
      //api 方法
      deleteMore ,getData
    };
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/config.scss";

.lable-wrap {
  &.category {
    @include labelDom(left, 60, 40);
  }

  &.date {
    @include labelDom(right, 93, 40);
  }

  &.key-work {
    @include labelDom(right, 99, 40);
  }
}
</style>
